<template>
  <div class="manage wrap scrollBar">
    <h1>第三方终端配置</h1>
    <div class="search">
      <div class="left">
        <el-input
          size="small"
          placeholder="输入第三方终端号码或IP地址进行查找"
          suffix-icon="el-icon-search"
          v-model="searchAccount"
          :disabled="tableData.length == 0 ? true : false"
        >
        </el-input>
      </div>
      <div class="right">
        <el-button type="add" @click="add">添加终端</el-button>
        <el-button
          type="delete"
          @click="deleteAll"
          :disabled="tableData.length == 0 ? true : false"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="listData">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="正在加载,请稍后..."
      >
        <template slot="empty">
          <div class="emptyData">
            <img src="~@/assets/images/status/nodata.png" alt="" srcset="" />
            <div style="margin-left: 20px">暂无数据</div>
          </div>
        </template>
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="65"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="thirdNumber"
          label="第三方终端号码"
          min-width="150"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="协议类型"
          min-width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sipId"
          label="SIP ID"
          min-width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ipAddress"
          label="IP地址"
          min-width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="port"
          label="端口"
          min-width="80"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="tos"
          label="业务类型"
          min-width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="thirdImpower"
          label="三级授权"
          min-width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          min-width="80"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          min-width="80"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="100"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <img
              src="~@/assets/images/iconAll/audit.png"
              alt=""
              style="margin-right: 20px"
            />
            <img src="~@/assets/images/iconAll/delete.png" alt="" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 翻页 -->
    <div class="pagination" v-if="tableData.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next,jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
    <!-- 批量添加终端 -->
    <el-dialog
      :title="addEditTitle"
      :visible.sync="isShow"
      width="600px"
      center
      custom-class="audit"
      top="8vh"
      @close="closeThird"
      :close-on-click-modal="false"
    >
      <div class="add-box">
        <el-form :model="addThird" ref="addThird" :rules="addThirdRules">
          <el-form-item
            label="第三方终端号码："
            :label-width="formLabelWidth"
            prop="thirdNumber"
          >
            <el-input
              placeholder="请输入消息号"
              v-model="addThird.thirdNumber"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="三级管控："
            :label-width="formLabelWidth"
            prop="control"
            :required="true"
          >
            <el-radio-group v-model="addThird.control" disabled>
              <el-radio :label="1">可以通</el-radio>
              <el-radio :label="2">受限通</el-radio>
              <el-radio :label="3">不通</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item
            label="业务类型："
            :label-width="formLabelWidth"
            prop="busType"
          >
            <el-radio-group v-model="addThird.busType">
              <el-radio :label="1">音视频</el-radio>
              <el-radio :label="2">仅音频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="协议类型："
            :label-width="formLabelWidth"
            prop="proType"
          >
            <el-radio-group v-model="addThird.proType">
              <el-radio :label="1">H.323</el-radio>
              <el-radio :label="2">SIP</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="SIP ID："
            :label-width="formLabelWidth"
            prop="sipId"
            v-show="addThird.proType == 2"
          >
            <el-input
              placeholder="请输入SIP ID"
              v-model="addThird.sipId"
              autocomplete="off"
              size="small"
              maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="IP地址："
            :label-width="formLabelWidth"
            prop="ipAddress"
          >
            <el-input
              placeholder="请输入ID地址"
              v-model.number="addThird.ipAddress"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="本地端口："
            :label-width="formLabelWidth"
            prop="port"
          >
            <el-input
              placeholder="请输入端口号"
              v-model.number="addThird.port"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="品牌："
            :label-width="formLabelWidth"
            prop="brand"
          >
            <el-select
              :clearable="true"
              v-model="addThird.brand"
              @change="brandCne"
              placeholder="请选择第三方终端品牌"
              size="small"
            >
              <el-option
                v-for="item in braBrandModelLocal"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="型号："
            :label-width="formLabelWidth"
            prop="model"
          >
            <el-select
              v-model="addThird.model"
              :clearable="true"
              placeholder="请选择终端型号"
              size="small"
            >
              <el-option
                v-for="(item, index) in models.models"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="备注："
            :label-width="formLabelWidth"
            prop="remark"
          >
            <el-input
              placeholder="请输入备注内容"
              v-model.number="addThird.remark"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addThirdTerminal('addThird')"
          >添加</el-button
        >
      </span>
    </el-dialog>
    <!-- 确认删除框 -->
    <el-dialog
      :title="title"
      :visible.sync="isTrue"
      width="500px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="~@/assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="content">删除该数据后不能恢复，是否确定删除!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="deleteT(1)">取消</el-button>
        <el-button type="shi" @click="deleteT(2)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/title.less";
import "@/assets/css/list.less";
import { mapState } from "vuex";
import { ipVerify } from "@/utils/validator";
export default {
  name: "ThirdPartyTerminal",
  data() {
    return {
      title: "提示",
      addEditTitle: "添加第三方终端",
      formLabelWidth: "180px",
      searchAccount: "",
      multipleSelection: [], //选中的数据
      delarr: [], //存放删除的数据
      tableData: [],
      currentPage: 1, // 页码数
      totals: 200,
      pageSize: 10,
      pageNumber: 1,
      loading: false,
      isShow: false,
      addThird: {
        thirdNumber: "", //第三方终端号码
        control: 1, //三级管控
        busType: 1, //业务类型
        proType: 1, //协议类型
        sipId: "",
        ipAddress: "", //ID地址
        port: "", //端口
        brand: "", //品牌
        model: "", //类型
        remark: "", //备注
      },
      addThirdRules: {
        thirdNumber: [
          {
            required: true,
            message: "请输入起始MAC地址",
            trigger: "blur",
          },
          {
            pattern: /^([0-9A-Za-z]{2}[:]){5}([0-9A-Za-z]{2}){1}$/,
            message: "请输入正确MAC, 格式为XX:XX:XX:XX:XX:XX",
            trigger: "blur",
          },
        ],
        sipId: [
          {
            required: true,
            message: "请输入起始虚拟终端号码",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]{1,20}$/,
            message: "请输入正确的虚拟终端号码",
            trigger: "blur",
          },
        ],
        //业务类型
        busType: [
          {
            required: true,
            message: "请选择业务类型",
            trigger: "change",
          },
        ],
        // 协议类型
        proType: [
          {
            required: true,
            message: "请选择协议类型",
            trigger: "change",
          },
        ],
        ipAddress: { required: true, validator: ipVerify, trigger: "blur" },
        port: [
          {
            required: true,
            message: "端口号不能为空",
            trigger: "blur",
          },
          {
            pattern:
              /^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/,
            message: "请输入正确的端口号",
            trigger: "change",
          },
        ],
        brand: [
          {
            required: true,
            message: "请选择品牌",
            trigger: "change",
          },
        ],
        model: [
          {
            required: true,
            message: "请选择型号",
            trigger: "change",
          },
        ],
      },
      isTrue: false,
    };
  },
  methods: {
    // 选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange: function (val) {
      this.pageNumber = 1;
      this.pageSize = val;
      this.currentPage = 1;
      // this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.pageNumber = val;
      // this.getList();
    },
    // 清除验证
    closeThird() {
      this.$refs.addThird.resetFields();
    },
    // 添加终端
    add() {
      this.isShow = true;
    },
    addThirdTerminal(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.isShow = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          return false;
        }
      });
    },
    // 重新选择品牌,清空类型
    brandCne() {
      this.addThird.model = "";
    },
    // 批量删除
    deleteAll() {
      let length = this.multipleSelection.length;
      if (length > 0) {
        this.isTrue = true;
        console.log(this.multipleSelection);
        for (var i = 0; i < length; i++) {
          // this.delarr.push(this.multipleSelection[i].articleIdStr);
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择需要删除的数据!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    deleteT(type) {
      if (type === 1) {
        this.isTrue = false;
        this.$message({
          type: "info",
          message: "已取消!",
          offset: "150",
          duration: "1500",
        });
        this.$refs.multipleTable.clearSelection();
      } else {
        this.isTrue = false;
        this.$message({
          type: "success",
          message: "删除成功!",
          offset: "150",
          duration: "1500",
        });
      }
    },
  },
  computed: {
    ...mapState({
      braBrandModelLocal: (state) => state.braBrandModel, //品牌信息
    }),
    // 型号
    models() {
      return (
        this.braBrandModelLocal.find((ele) => {
          return ele.value === this.addThird.brand;
        }) || []
      );
    },
  },
};
</script>

<style lang='less'>
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    height: 12px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
  }
}
.audit {
  .el-dialog__body {
    padding: 15px 20px 0 !important;
  }
  .el-dialog__title {
    font-size: 14px;
    color: #4c5967;
    font-weight: 600;
  }
  .el-form-item__error{
    padding-top: 0;
  }
}
.add-box {
  .el-form-item__label {
    font-size: 13px;
  }

  .el-input--small .el-input__inner {
    width: 240px;
    vertical-align: middle;
  }
}
</style>
